import { View, Text, TouchableOpacity, Image, Alert } from 'react-native'
import React from 'react'
import { Tabs, useRouter } from 'expo-router'
import { zhSpacingColBase, zhSpacingColSm, zhSpacingRowBase, zhThemeColor } from '../../global'

export default function Layout() {
  //获得路由器对象，用于页面跳转
  let router = useRouter()
  return (
    //页签式导航，为页签页面提供“顶部导航条”和“底部页签条”
    <Tabs screenOptions={{
      /************下面的选项是Stack和Tabs导航共有的***********/
      headerStyle: {backgroundColor:zhThemeColor},//标题栏背景颜色
      headerTintColor: '#fff',            //标题文本字体颜色
      headerTitleAlign: 'center',         //标题文本居中对齐
      headerTitleStyle: {fontSize:16},    //标题文本大小
      /**************下面的选项是Tabs导航专有的*****************/
      tabBarStyle: {height: 70, paddingBottom:zhSpacingColSm}, //页签条的样式
      tabBarLabelStyle: {fontSize:14}, //页签条中的文字(称为Label)样式
      tabBarActiveTintColor: zhThemeColor, //标签文字激活时的颜色
      //tabBarInactiveTintColor: '#f00', //标签文字未激活时的颜色
    }}>
      <Tabs.Screen name='home' options={{
        /************下面的选项是Stack和Tabs导航共有的***********/
        title: '智慧社区',                    //标题文字
        //headerLeft: ()=>(<></>),
        //headerTitle: ()=>(<></>),
        headerRight: ()=>(
          <TouchableOpacity activeOpacity={0.6} onPress={()=>Alert.alert('提示','您确定要退出吗？',[
            {text:'确定',onPress:()=>router.replace('/')},
            {text:'取消'}
          ])}>
            {/* 触摸后不透明度可以发生改变的组件 */}
            <Image style={{width:30,height:30,marginRight:zhSpacingRowBase}} source={require('../../assets/img/user1.png')}/>
          </TouchableOpacity>),
        /**************下面的选项是Tabs导航专有的*****************/
        tabBarLabel: '首页',  //页签中的标签文字
        //当前页签对应的图标：激活时状态的图标 + 未激活状态的图标
        tabBarIcon: ({focused})=>{
          //框架调用当前函数时，会传递进来一个实参：{focused,color,size}
          if(focused){    //当前页签获得焦点了
            return <Image source={require('../../assets/img/home_active.png')} style={{width:32,height:32}}/>
          }else {         //当前页签失去焦点了
            return <Image source={require('../../assets/img/home.png')} style={{width:32,height:32}}/>
          }
        }
      }}/>
      <Tabs.Screen name='property' options={{}}/>
      <Tabs.Screen name='community' options={{
        title: '社 区',             //导航条中的标题
        tabBarLabel: '社区',        //页签栏中的标签文字
        tabBarIcon: ({focused})=>{  //页签栏中的图标
          if(focused){  //当前页签获得焦点
            return <Image style={{width:30,height:30}} source={require('../../assets/img/community_active.png')}/>
          }else {  //当前页签失去焦点
            return <Image style={{width:30,height:30}} source={require('../../assets/img/community.png')}/>
          }
        } 
      }}/>
      <Tabs.Screen name='my' options={{}}/>
    </Tabs>
  )
}